<!-- ------------------个人中心------------- -->
<template>
	<view class="mine">
		<view class="mine_t">
			<image src="/static/image/mine/geren/beijing.png" class="bcg" />
			<view>
				<view class="userContent">
					<image
						:src="userInfo.tx_img || `/static/image/mine/geren/touxiang.png`"
						class="userImg"
						mode="aspectFill"
						@click="updateAvatar"
					/>

					<view class="userInfo">
						<text class="userName">{{ userInfo.ue_truename || "--" }}</text>

						<text :style="{ marginTop: `12rpx` }">UID: {{ userInfo.ue_id }}</text>
						<view class="userInfo_b">
							<view>会员帐号: {{ userInfo.ue_account }}</view>
							<view class="line" />
							<view
								@click="copy(userInfo.yqm)"
								:style="{ display: `flex`, alignItems: `center` }"
							>
								<text>邀请码: {{ userInfo.yqm }}</text>
								<image
									:style="{
										width: `24rpx`,
										height: `24rpx`,
										marginLeft: `12rpx`,
									}"
									src="/static/image/copy.png"
									mode="aspectFit"
								/>
							</view>
						</view>
					</view>
				</view>
				<view class="bannerContent">
					<navigator hover-class="none" class="item" url="/pages/mine/symx">
						<view class="item_img">
							<image src="/static/image/mine/geren/shouyi.png" />
						</view>
						<view class="text">挖矿收益</view>
					</navigator>
					<navigator hover-class="none" class="item" url="./sldd">
						<view class="item_img">
							<image src="/static/image/mine/geren/dingdan.png" />
						</view>
						<view class="text">我的产品</view>
					</navigator>
					<navigator hover-class="none" class="item" url="./wdtd">
						<view class="item_img">
							<image src="/static/image/mine/geren/tuandui.png" />
						</view>
						<view class="text">我的团队</view>
					</navigator>
					<navigator hover-class="none" class="item" url="./share">
						<view class="item_img">
							<image src="/static/image/mine/geren/liwu.png" />
						</view>
						<view class="text">邀请好友</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="list">
			<view>
				<navigator class="list_item" url="/pages/mine/smrz">
					<view class="item_l">实名认证</view>
					<image src="/static/image/mine/geren/fanhui.png" />
				</navigator>
				<navigator class="list_item" url="/pages/mine/szskzh">
					<view class="item_l">转账</view>
					<image src="/static/image/mine/geren/fanhui.png" />
				</navigator>
				<navigator :style="{ border: `none` }" class="list_item" url="/pages/mine/skzh">
					<view class="item_l">设置收款账户</view>
					<image src="/static/image/mine/geren/fanhui.png" />
				</navigator>
			</view>

			<view>
				<navigator class="list_item" url="/pages/mine/securitySetting?type=login">
					<view class="item_l">重置登录密码</view>
					<image src="/static/image/mine/geren/fanhui.png" />
				</navigator>

				<navigator
					class="list_item"
					:style="{ border: `none` }"
					url="/pages/mine/securitySetting?type=transaction"
				>
					<view class="item_l">重置交易密码</view>
					<image src="/static/image/mine/geren/fanhui.png" />
				</navigator>
			</view>

			<view>
				<navigator class="list_item" url="/pages/mine/bzzx">
					<view class="item_l">联系客服</view>
					<image src="/static/image/mine/geren/fanhui.png" />
				</navigator>
				<navigator class="list_item" url="/pages/mine/feedbackResult">
					<view class="item_l">反馈结果</view>

					<label
						v-if="Number(userInfo.result_num)"
						:style="{
							marginRight: `12rpx`,
							fontSize: `22rpx`,
							padding: `2rpx 10rpx`,
							color: `#fff`,
							borderRadius: `50%`,
							backgroundColor: `#f30`,
						}"
					>
						{{ userInfo.result_num }}
					</label>
					<image src="/static/image/mine/geren/fanhui.png" />
				</navigator>
				<view class="list_item last">
					<view class="item_l">版本号</view>
					<view class="item_r"> V{{ appInfo.version }} </view>
				</view>
			</view>
			<view class="btn" @click="signOut"> 退出登录 </view>
		</view>
	</view>
</template>

<script>
	import { Storage } from "@/static/utils";

	export default {
		data() {
			return {
				userInfo: {},
				appInfo: {
					version: "1.0.0",
					appName: "",
					description: "",
				},
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			const { version, getProperty, appid } = plus.runtime;
			this.appInfo.version = version;
			getProperty(appid, ({ name: appName, description }) => {
				this.appInfo.appName = appName;
				this.appInfo.description = description;
			});
			// #endif
			this.getUserInfo();
		},
		methods: {
			getReward() {
				this.$request
					.post("/Home/info/lianxiusDo", { lynr: "V级奖励申请", type: "sq" })
					.then(() => {
						uni.showToast({ title: "申请成功" });
						this.getUserInfo();
					});
			},
			signOut() {
				Storage.clear();
				uni.reLaunch({ url: "/pages/loginReg/login" });
			},

			getUserInfo() {
				this.$request.get("/Home/info/me").then(({ data }) => {
					this.userInfo = data;
					this.$forceUpdate();
				});
			},
			copy(data) {
				uni.setClipboardData({
					data,
					success: () => {
						uni.showToast({ title: "已复制到剪贴板", icon: "none" });
					},
				});
			},
			async updateAvatar() {
				const [sheetFail, sheetRes] = await uni.showActionSheet({
					itemList: ["查看", "修改头像"],
				});

				if (sheetFail) return;

				if (!sheetRes.tapIndex) {
					await uni.previewImage({
						urls: [this.userInfo.tx_img || "/static/image/mine/geren/touxiang.png"],
					});
					return;
				}

				const [chooseFail, chooseRes] = await uni.chooseImage({
					count: 1,
				});

				if (chooseFail) return;

				const [uploadFail, uploadRes] = await uni.uploadFile({
					url: `${this.$request.defaults.baseURL}/Home/Login/upload`,
					name: "avatar",
					filePath: chooseRes.tempFilePaths[0],
				});

				if (uploadFail) {
					uni.showToast({ title: "upload fail.", icon: "none" });
					return;
				}
				if (uploadRes.data[0] !== "{") {
					uploadRes.data = uploadRes.data.slice(1);
				}

				const { code, data, msg: title } = JSON.parse(uploadRes.data);
				if (!+code) {
					uni.showToast({ title, icon: "none" });
					return;
				}
				const { msg } = await this.$request.get("/Home/info/sgtx", {
					tx_img: data.avatar,
				});

				this.getUserInfo();

				await uni.showToast({ title: msg });
			},
		},
	};
</script>

<style lang="scss">
	.mine {
		.mine_t {
			width: 100%;
			height: 320rpx;
			position: relative;
			margin-bottom: 30rpx;

			.bcg {
				width: 100%;
				height: 260rpx;
			}

			> view {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				padding: 30rpx 30rpx 0;
				box-sizing: border-box;

				.userContent {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 30rpx;

					.userImg {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						margin-right: 30rpx;
					}

					.userInfo {
						display: flex;
						flex-direction: column;
						flex: 1;
						font-size: 22rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						color: #ffffff;

						.userName {
							font-size: 34rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							color: #ffffff;
						}

						.userInfo_b {
							margin-top: 12rpx;
							display: flex;
							flex-direction: row;
							align-items: center;

							.line {
								width: 1rpx;
								height: 24rpx;
								background: #a0a0a0;
								margin: 0 20rpx;
							}
						}
					}
				}

				.bannerContent {
					width: 100%;
					height: 160rpx;
					background: #ffffff;
					border-radius: 10rpx;
					padding: 0 60rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item {
						text-align: center;

						.item_img {
							width: 100%;
							height: 56rpx;
							margin-bottom: 20rpx;

							image {
								width: 56rpx;
								height: 56rpx;
							}
						}

						.text {
							font-size: 24rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							color: #333333;
							line-height: 24rpx;
						}
					}
				}
			}
		}
		.list {
			padding: 0 30rpx;
			box-sizing: border-box;
			> view {
				width: 100%;
				background: #ffffff;
				border-radius: 10rpx;
				margin-bottom: 30rpx;

				.list_item {
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #e5e5e5;
					padding: 20rpx 30rpx;
					box-sizing: border-box;

					.item_l {
						flex: 1;
						font-size: 28rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						color: #333333;
						line-height: 60rpx;
					}

					image {
						width: 13rpx;
						height: 23rpx;
					}

					.item_r {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.last {
					border: none;
				}
			}
		}

		.btn {
			text-align: center;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #ff3535;
			height: 80rpx;
			line-height: 80rpx;
			width: 100%;
			background-color: #ffffff;
			border-radius: 10rpx;
		}
	}
</style>
